<template>
	<uni-section title="分类管理" type="line" class="category-section">
		<view class="search-bar">
			<uni-easyinput v-model="searchKeyword" placeholder="请输入分类名称" class="search-input"
				placeholderStyle="color: #a0b1c5;" />
			<!-- <button @click="search" type="primary" size="mini" style="width: 100rpx;">搜索</button> -->
		</view>

		<view class="category-list">
			<uni-card v-for="category in displayedCategories" :key="category._id" @click="editCategory(category._id)"
				class="category-card">
				<view class="category-item">
					<view class="category-header">
						<text class="category-name">{{ category.name }}</text>
						<view class="sort-badge">
							<uni-icons type="sort" size="16" color="#fff"></uni-icons>
							<text>{{ category.sort }}</text>
						</view>
					</view>
					<text class="category-desc" v-if="category.description">{{ category.description }}</text>
				</view>
			</uni-card>

			<uni-load-more :status="loadStatus" color="#1a73e8"></uni-load-more>
			<!-- 新增按钮 -->
			<uni-fab ref="fab" horizontal="right" vertical="bottom" @fabClick="fabClick"
				type="plus" :button-color="'#1a73e8'" :icon-color="'#fff'" />
		</view>
	</uni-section>
</template>

<script>
	export default {
		data() {
			return {
				categories: [], // 所有分类数据
				searchKeyword: '', // 搜索关键词
				loadStatus: 'more', // 加载状态
				pageSize: 10, // 每页数量
				pageNum: 1, // 当前页码
				hasMore: true // 是否还有更多数据
			}
		},
		onShow() {
			this.getCategoriesList();
		},
		onPullDownRefresh() {
			this.refresh();
		},
		onReachBottom() {
			if (this.hasMore) {
				this.pageNum++;
				this.getCategoriesList();
			}
		},
		methods: {
			async getCategoriesList() {
				this.loadStatus = 'loading';

				try {
					const obj = uniCloud.importObject('goods');
					const res = await obj.getCategoriesList({
						pageNum: this.pageNum,
						pageSize: this.pageSize
					});

					if (res.code === 0) {
						if (this.pageNum === 1) {
							this.categories = res.data;
						} else {
							this.categories = [...this.categories, ...res.data];
						}

						// 判断是否还有更多数据
						this.hasMore = res.data.length === this.pageSize;
						this.loadStatus = this.hasMore ? 'more' : 'noMore';
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						this.loadStatus = 'more';
					}
				} catch (err) {
					uni.showToast({
						title: '获取分类失败',
						icon: 'none'
					});
					this.loadStatus = 'more';
					//console.error('获取分类错误:', err);
				}
			},

			// 刷新列表
			async refresh() {
				this.pageNum = 1;
				this.hasMore = true;
				this.loadStatus = 'more';
				await this.getCategoriesList();
				uni.stopPullDownRefresh();
			},

			// 搜索分类
			async search() {
				if (this.searchKeyword.trim() === '') {
					uni.showToast({
						title: '请输入搜索关键词',
						icon: 'none'
					});
					return;
				}

				try {
					const obj = uniCloud.importObject('goods');
					const res = await obj.getCategoriesList({
						name: this.searchKeyword
					});

					if (res.code === 0) {
						this.categories = res.data;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '搜索失败',
						icon: 'none'
					});
					//console.error('搜索错误:', err);
				}
			},

			// 编辑分类
			editCategory(id) {
				//console.log(id, 'edit')
				uni.$router.to({
					url: '/pagesA/item/categories/edit',
					params: {
						_id: id
					}
				})
			},
			fabClick() {
				uni.$router.to({
					url: '/pagesA/item/categories/add',
				})
			}
		},
		computed: {
			// 过滤后的分类列表（可用于搜索）
			displayedCategories() {
				if (!this.searchKeyword.trim()) {
					return this.categories;
				}

				return this.categories.filter(category =>
					category.name.includes(this.searchKeyword)
				);
			}
		}
	}
</script>

<style scoped>
	/* 页面整体背景 */
	.category-section {
		background: linear-gradient(135deg, #e6f0ff 0%, #f0f7ff 100%);
		min-height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
	}

	/* 搜索栏样式 */
	.search-bar {
		display: flex;
		padding: 20rpx 0;
		background: transparent;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.search-input {
		background: #fff;
		border-radius: 50rpx;
		box-shadow: 0 4rpx 16rpx rgba(26, 115, 232, 0.15);
		border: 1rpx solid #d0e3ff;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #2c3e50;
		
	}

	/* 分类列表容器 */
	.category-list {
		padding: 0 10rpx;
	}

	/* 分类卡片样式 */
	.category-card {
		border-radius: 20rpx !important;
		overflow: hidden;
		margin-bottom: 30rpx;
		border: 1rpx solid #d0e3ff !important;
		background: #fff !important;
		transition: all 0.3s ease;
		box-shadow: 0 6rpx 20rpx rgba(26, 115, 232, 0.08);
	}

	.category-card:hover {
		transform: translateY(-5rpx);
		box-shadow: 0 12rpx 30rpx rgba(26, 115, 232, 0.15);
		border-color: #1a73e8 !important;
	}

	/* 分类项内部样式 */
	.category-item {
		padding: 30rpx;
	}

	.category-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.category-name {
		font-weight: bold;
		font-size: 32rpx;
		color: #1a4e8e;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-right: 20rpx;
	}

	.sort-badge {
		background: linear-gradient(90deg, #1a73e8, #4d9aff);
		color: #fff;
		font-size: 24rpx;
		padding: 6rpx 20rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.sort-badge text {
		margin-left: 8rpx;
	}

	.category-desc {
		color: #5a7ea0;
		font-size: 26rpx;
		line-height: 1.6;
		display: block;
		background: #f9fbfe;
		padding: 20rpx;
		border-radius: 12rpx;
		border-left: 4rpx solid #4d9aff;
	}

	/* 加载更多样式 */
	.uni-load-more {
		margin-top: 20rpx;
		margin-bottom: 40rpx;
	}
</style>